<template>
  <a-form @submit="handleSubmit" :form="form" class="form">
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="优惠券标题">
          <a-input
            placeholder="请输入标题"
            v-decorator="[
              'couponTemplate.title',
              { rules: [{ required: true, message: '请输入标题', whitespace: true }] }
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="使用说明">
          <a-input
            placeholder="请输入使用说明"
            v-decorator="[
              'couponTemplate.description',
              { rules: [{ required: true, message: '请输入使用说明', whitespace: true }] }
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="生效日期类型">
          <a-select
            @change="changeDateType"
            placeholder="生效日期类型"
            v-decorator="['couponTemplate.dateType', { rules: [{ required: true, message: '请选择生效日期类型' }] }]"
          >
            <a-select-option value="1">固定日期</a-select-option>
            <a-select-option value="2">领取日期</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="每人限领个数">
          <a-select
            placeholder="每人限领个数"
            v-decorator="['couponTemplate.quota', { rules: [{ required: true, message: '请选择每人限领个数' }] }]"
          >
            <a-select-option value="0">无限制</a-select-option>
            <a-select-option value="1">1个</a-select-option>
            <a-select-option value="5">5个</a-select-option>
            <a-select-option value="10">10个</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="领取优惠券的次数">
          <a-select
            placeholder="领取优惠券的次数"
            v-decorator="[
              'couponTemplate.statFetchNum',
              { rules: [{ required: true, message: '请选择领取优惠券的次数' }] }
            ]"
          >
            <a-select-option value="0">无限制</a-select-option>
            <a-select-option value="1">1次</a-select-option>
            <a-select-option value="5">5次</a-select-option>
            <a-select-option value="10">10次</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="发行总量">
          <a-input-number
            placeholder="发行总量"
            style="width:100%"
            v-decorator="[
              'couponTemplate.total',
              { rules: [{ required: true, type: 'number', message: '请输入发行总量', whitespace: true }] }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" v-show="showVaildDateType">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="生效开始时间">
          <a-date-picker
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            :disabledDate="disabledDate"
            v-decorator="[
              'couponTemplate.validStartTime',
              { rules: [{ required: this.validStartTime, message: '请选择生效开始时间' }] }
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="生效结束时间">
          <a-date-picker
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            :disabledDate="disabledDate"
            v-decorator="[
              'couponTemplate.validEndTime',
              { rules: [{ required: this.validStartTime, message: '请选择生效结束时间' },{ validator:checkValidEndTime}] }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" v-show="showFixDateType">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="领取日期开始的天数">
          <a-input-number
            placeholder="发行总量"
            style="width:100%"
            v-decorator="[
              'couponTemplate.fixedStartTerm',
              {
                rules: [
                  { required: this.vaildlFixe, type: 'number', message: '请输入领取日期开始的天', whitespace: true }
                ]
              }
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 5, offset: 1 }" :lg="{ span: 5 }" :md="{ span: 6 }" :sm="24">
        <a-form-item label="领取日期结束天数">
          <a-input-number
            placeholder="发行总量"
            style="width:100%"
            v-decorator="[
              'couponTemplate.fixedEndTerm',
              {
                rules: [
                  { required: this.vaildlFixe, type: 'number', message: '请输入领取日期结束天数', whitespace: true }
                ]
              }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import moment from 'dayjs'

export default {
  name: 'BaseInfoFom',
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      showFixDateType: false,
      showVaildDateType: false,
      vaildlFixe: false,
      validStartTime: false
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of form:',
            description: values
          })
        }
      })
    },
    checkValidEndTime(rules,values,callback){
        if(this.form.getFieldValue('couponTemplate.validEndTime')<this.form.getFieldValue('couponTemplate.validStartTime')){
          callback("生效结束时间不能小于生效开始时间")
        }

    },

    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    changeDateType(value) {
      if (value == 1) {
        ;(this.showVaildDateType = true), (this.showFixDateType = false)
        ;(this.validStartTime = true), (this.vaildlFixe = false)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.validStartTime'], { force: true })
          this.form.validateFields(['couponTemplate.validEndTime'], { force: true })
          this.form.validateFields(['couponTemplate.fixedStartTerm'], { force: true })
          this.form.validateFields(['couponTemplate.fixedEndTerm'], { force: true })
        })
      }
      if (value == 2) {
        ;(this.showVaildDateType = false), (this.showFixDateType = true)
        ;(this.validStartTime = false), (this.vaildlFixe = true)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.validStartTime'], { force: true })
          this.form.validateFields(['couponTemplate.validEndTime'], { force: true })
          this.form.validateFields(['couponTemplate.fixedStartTerm'], { force: true })
          this.form.validateFields(['couponTemplate.fixedEndTerm'], { force: true })
        })
      }
    }
  }
}
</script>

<style scoped></style>
